<template>
  <div id="space-size-analyze">
    <a-card title="空间图片大小分析" style="width: 100%">
      <v-chart :option="options" style="height: 320px; max-width: 100%;" :loading="loading" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, watchEffect} from 'vue'
import {getSpaceSizeAnalyzeUsingPost} from '@/api/spaceAnalyzeController'
import { message } from 'ant-design-vue'
import VChart from "vue-echarts";
import "echarts";

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number
}

const props = withDefaults(defineProps<Props>(), {
  // 默认为false，这样如果单独分析某空间只需要传spaceId
  queryAll: false,
  queryPublic: false,
})

// 接受图表数据
const dataList = ref<API.SpaceSizeAnalyzeResponse[]>([])
const loading = ref<boolean>(true) // 默认为true，加载

/**
 * 加载数据
 */
const fetchData = async () => {
  loading.value = true
  const res = await getSpaceSizeAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
  })
  if (res.data.code === 0) {
    dataList.value = res.data.data ?? []
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  // 加载完毕结束加载状态
  loading.value = false
}

/**
 * 监听变量，改变时触发数据的重新加载
 * 只要有任何一个值发生变化，都会重新执行封装的函数
 */
watchEffect(() => {
  fetchData()
})

// 图表内容参数
const options = computed(() => {
  const pieData = dataList.value.map((item) => ({
    name: item.sizeRange,
    value: item.count,
  }))
  return {
    color: ['#FFA23F', '#FF6B43', '#625AFF', '#D041FF', '#1A76FF', '#2FDC89'],
    title: {
      text: '总图片数',
      subtext: `${pieData.reduce((sum, item) => sum + (Number(item.value) || 0), 0)}张`, // 动态计算总行数
      itemGap: 20,
      x: 'center',
      y: '46%',
      textStyle: {
        fontSize: 18,
        fontWeight: 'normal',
        color: '#333333',
      },
      subtextStyle: {
        fontSize: 24,
        fontWeight: 'normal',
        align: "center",
        color: '#333333'
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c}张 ({d}%)" // 添加单位
    },
    series: [{
      name: '图片大小',
      type: 'pie',
      selectedMode: 'single',
      radius: [100, 120],
      label: {
        padding: [0, -60],
        formatter: '{b}\n\n', // 保留换行格式
      },
      labelLine: {
        length: 15,
        length2: 80,
        show: true,
        color: '#00ffff'
      },
      data: pieData.map(item => ({
        ...item,
        // 保留选中状态逻辑（可选）
        selected: item.name === pieData[0]?.name // 默认选中第一个
      }))
    }]
  }
})

</script>

<style scoped></style>
